/*
 * @Author: xiaosihan 
 * @Date: 2024-10-01 21:57:25 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-02 00:03:17
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./modelMeasure.module.less";
import DragModel from "../DragModel/DragModel";
import lengthPNG from "./length.png";
import volumePNG from "./volume.png";
import thicknessPNG from "./thickness.png";
import boxPNG from "./box.png";
import clearPNG from "./clear.png";
import dragModelStore from "../DragModel/dragModelStore";
import clsx from "clsx";


interface Iprops {
    children?: ReactNode
}

// 模型测量
export default function ModelMeasure() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [showList, setShowList] = useState(dragModelStore.showList);

    useEffect(() => {
    }, []);

    useEffect(() => autorun(() => {
        setShowList(dragModelStore.showList);
    }, { delay: 10 }), []);

    return (
        <DragModel
            id="model_measure"
            title="测量"
            orginLeft={50}
            orginTop={250}
        >
            <div className={styles.modelMeasure}>
                {
                    [
                        { icon: lengthPNG, text: "测量距离", id: "length" },
                        { icon: volumePNG, text: "体积/面积", id: "volume" },
                        { icon: thicknessPNG, text: "壁厚", id: "thickness" },
                        { icon: boxPNG, text: "包围盒", id: "box" },
                    ].map((item, i) => {
                        return (
                            <div
                                key={i}
                                className={clsx(styles.item, showList.includes(item.id) && styles.active)}
                                onClick={() => {
                                    dragModelStore.close("length", "volume", "thickness", "box");
                                    dragModelStore.setShowList(item.id);
                                }}
                            >
                                <img
                                    alt=""
                                    src={item.icon}
                                    className={styles.icon}
                                />
                                {item.text}
                            </div>
                        );
                    })
                }
                <div
                    className={styles.item}
                    onClick={() => {
                        dragModelStore.close("length", "volume", "thickness", "box");
                    }}
                >
                    <img alt="" src={clearPNG} className={styles.icon} />
                    清除测量数据
                </div>

            </div>
        </DragModel>
    );

}

